<template>
    <ayjDialog ref="dialoRef" :title="titleName" width="30%" @closeFun="close" :slotFooter="true" height="800">
        <div class="content">
            <el-form ref="formRef" :model="objectForm" :rules="rules" label-width="90px">
                <el-form-item label="职位名称:" prop="title">
                    <el-input v-model="objectForm.title" placeholder="请输入职位名称" style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex_between">
                <div></div>
                <div>
                    <el-button @click="close" size="mini">取消</el-button>
                    <el-button type="primary" @click="sbumitHandle" size="mini">确定</el-button>
                </div>
            </div>
        </template>
    </ayjDialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps, reactive } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()

onMounted(() => {
})

const props = defineProps({
    data: {
        type: Object,
        default: () => { }
    }
})

const emit = defineEmits(['addBack'])

const objectForm = ref({
    title: '',
})

// 新增：表单校验规则
const rules = ref({
    title: [
        { required: true, message: '请输入职位名称', trigger: 'blur' }
    ],
})

const dialoRef = ref(null)
const info = ref({})
const open = (row) => {
    info.value = row
    objectForm.value = {
        title: row?.title || '',
        id: row?.id || '',
    }
    dialoRef.value.open()
}

const titleName = computed(() => {
    return info.value?.id ? '编辑职位' : '新增职位'
})

const close = () => {
    objectForm.value = {
        title: '',
    }
    proxy.$refs.formRef.resetFields()
    dialoRef.value.close()
}

// 新增：表单提交校验逻辑
const formRef = ref(null)
const sbumitHandle = () => {
    proxy.$refs.formRef.validate(async (valid) => {
        if (valid) {
            let params = {
                ...objectForm.value,
            }
            let url = info.value?.id ? config.company_position_save : config.company_position_add
            let res = await proxy.$api({ url: url, data: params });
            if (res.status == 1) {
                proxy.$message({
                    message: '操作成功',
                    type: 'success'
                });
                emit('addBack', true)
                close()
            } else {
                proxy.$message({
                    message: res?.msg || '添加失败',
                    type: 'error'
                })
            }
        } else {
            return false
        }
    })
}

defineExpose({
    open,
    close
})

</script>

<style lang="scss" scoped>
.content {
    padding: 20px 0;
}
</style>